上一篇，整合了 Storybook 和 Nuxt，也建立了一個元件為 MyButton。

但如果每次要新增一個元件，就要建立四個檔案如下：

• index.js
• MyButton.stories.js
• MyButton.vue
• README.md

這樣其實非常麻煩，也浪費時間。

因此今天分享一下使用 plop，

幫助我們快速建立檔案，並寫好預設的內容。

安裝

npm i -D plop

建立腳本

建立一個新的資料夾 plop，內容結構如下：

• plop
  • component
    • index.js
      • index.hbs
      • readme.hbs
      • stories.hbs
      • vue.hbs
  • util/index.js
    • index.js

新增指令

• package.json

"scripts": {
  "plop": "plop --plopfile ./plop/index.js"
}

使用

npm run plop
# 輸入 TheTextField

成功建立一個新的元件。

輸入 TheTextField 會幫我們建立四個檔案且包含預設內容：

components/TheTextField/index.js

export { default } from './TheTextField.vue'

方便其他地方在引入元件時可以寫成下面這樣：

import TheTextField from '@/components/TheTextField'

components/TheTextField/README.md

自動產生的預設內容為：

# TheTextField Markdown

components/TheTextField/TheTextField.vue

自動產生的預設內容為：

components/TheTextField/TheTextField.stories.js

自動產生的預設內容為：

import Vue from 'vue'

import { storiesOf } from '@storybook/vue'
import { action } from '@storybook/addon-actions'
import centered from '@storybook/addon-centered'
import { withReadme }  from 'storybook-readme'
import '@storybook/addon-console'
import README from './README.md'

import TheTextField from './'

Vue.component('TheTextField', TheTextField)

storiesOf('TheTextField', module)
  .addDecorator(centered)
  .add('TheTextField', withReadme(README, () => ({
    methods: {
      log() {
        action('TheTextField')()
      },
    },
    template: (
      pug
      `v-app(dark)
        v-container(fluid)
          TheTextField `
    )
  })))

storybook 截圖

最後附上今天的 branch

以下為 branch 連結：

008-plop

指令：

git clone -b 008-plop --single-branch https://github.com/hunterliu1003/blog.git
cd blog
npm install
npm run plop
# 輸入元件名稱 (ex. BaseButton)
npm run storybook